<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link href="../js/layui/css/layui.css" rel="stylesheet">
        <title>Title</title>
    </head>
    <script src="../js/vue.global.min.js"></script>
    <script src="../js/layui/layui.js"></script>
    <script src="../js/chart.js"></script>
    <script src="../js/echarts.js"></script>
    <body>
        <div class="layui-layout layui-layout-admin layui-bg-gray">
            <div class="layui-card" style="margin: 15px;">
                <div class="layui-card-header">
                    <span class="layui-font-22">数据显示</span>
                </div>
                <div id="data_chart" class="layui-card-body" style="width: 90%;min-height: 200px;">

                </div>
            </div>

            <div id="data_info" class="layui-row layui-col-space15" style="margin: 15px;">
                <div class="layui-col-md2">
                    <div class="layui-card">
                      <div class="layui-card-header">文件总数据长度</div>
                      <div class="layui-card-body">
                            {{
                                DataCount
                            }}
                      </div>
                    </div>
                </div>
                <div class="layui-col-md2">
                    <div class="layui-card">
                      <div class="layui-card-header">显示总数据长度</div>
                        <div class="layui-card-body">
                                {{
                                    ShowDataCount
                                }}
                        </div>
                    </div>
                </div>
            </div>


            <div class="layui-card" style="margin: 15px;">
                <div class="layui-card-header">
                    <span class="layui-font-22">参数设置</span>
                </div>
                <div class="layui-card-body">
                    <form class="layui-form layui-form-pane" action="">

                        <div class="layui-form-item layui-padding-1">
                            <label class="layui-form-label">数据文件</label>
                            <div class="layui-input-inline" style="width: 60%;">
                                <input type="text" name="" placeholder="文件路径" class="layui-input" id="sensor-filepath" ondragover="allowSideDrop(event)" ondrop="SideDrop(event)">
                            </div>
                        </div>

                        <div class="layui-form-item layui-padding-1">
                            <label class="layui-form-label">SimpleLevel</label>
                            <div class="layui-input-inline" style="width: 300px;">
                                <input type="number" name="" placeholder="SimpleLevel" autocomplete="off" class="layui-input" min="0" step="1" id="sensor-simplelevel" lay-affix="number">
                            </div>
                        </div>

                        <div class="layui-form-item layui-padding-1">
                            <label class="layui-form-label">FileType</label>
                            <div class="layui-input-block" style="width: 300px;">
                                <select id="sensor-filetype">
                                    <option value="1">4通道</option>
                                    <option value="2">1通道</option>
                                    <option value="3">2通道</option>
                                </select>
                            </div>
                        </div>

                        <div class="layui-form-item layui-padding-1">
                            <label class="layui-form-label">DataType</label>
                            <div class="layui-input-block" style="width: 300px;">
                                <select id="sensor-filedatatype">
                                    <option value="1">小端</option>
                                    <option value="2">大端</option>
                                </select>
                            </div>
                        </div>
                        
                        <div class="layui-form-item layui-padding-1">
                            <label class="layui-form-label">FilterLevel</label>
                            <div class="layui-input-inline" style="width: 300px;">
                                <input type="number" name="" placeholder="FilterLevel" autocomplete="off" class="layui-input" min="0" step="10"  id="sensor-filterlevel" lay-affix="number">
                            </div>
                            <div class="layui-input-inline">
                                <button type="button" class="layui-btn" onclick="reload_by_form()">发送</button>
                            </div>
                        </div>


                        <div class="layui-form-item">
                            <label class="layui-form-label">数据显示</label>
                            <div class="layui-input-block">
                              <input type="checkbox" id="SensorData1Show" lay-skin="tag" title="Data 1" lay-filter="sensorData" checked>
                              <input type="checkbox" id="SensorData2Show" lay-skin="tag" title="Data 2" lay-filter="sensorData">
                              <input type="checkbox" id="SensorData3Show" lay-skin="tag" title="Data 3" lay-filter="sensorData">
                              <input type="checkbox" id="SensorData4Show" lay-skin="tag" title="Data 4" lay-filter="sensorData">
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </body>
    <script>
        function allowSideDrop(e){
            e.preventDefault();
        }
        function SideDrop(e){
            e.preventDefault();
            e.target.value=e.dataTransfer.getData("Text");
        }
    </script>
    <script>
        const { createApp, ref } = Vue;
        let element;
        let layer;
        let util;
        let form;
        let laydate;
        let $;

        layui.use(['element', 'layer', 'util','form', 'laydate'], function(){
            element = layui.element;
            layer = layui.layer;
            util = layui.util;
            form = layui.form;
            laydate = layui.laydate;
            $ = layui.$;

            form.render(); // 渲染表单
            form.on('checkbox(sensorData)', function(data){
                console.log("Checkbox changed");
                update_chartShow();
            });
        });

        const app_data_chart=createApp({
            setup() {
                return {

                }
            }
        }).mount('#data_chart');

        let DataCount = ref(0);
        let ShowDataCount = ref(0);

        const app_data_info=createApp({
            setup() {
                return {
                    DataCount,
                    ShowDataCount
                }
            }
        }).mount('#data_info');

        var loadFiles;
        var data_chart_dom;
        var data_chart;

        var DateData;
        var SensorData1;
        var SensorData2;
        var SensorData3;
        var SensorData4;
        var SensorFileType;

        function update_chartShow(){
            update_chartType1($("input#SensorData1Show").is(":checked"),$("input#SensorData2Show").is(":checked"),$("input#SensorData3Show").is(":checked"),$("input#SensorData4Show").is(":checked"));
        }
        function update_chartType1(data1,data2,data3,data4){
            if(SensorFileType==-1){
                return;
            }
            var data_chart_option = {
                tooltip: {
                    trigger: 'axis',
                    position: function (pt) {
                    return [pt[0], '10%'];
                    }
                },
                title: {
                    left: 'center',
                    text: '传感器数据'
                },
                toolbox: {
                    feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    restore: {},
                    saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: DateData
                },
                yAxis: {
                    type: 'value',
                    boundaryGap: [0, '100%']
                },
                dataZoom: [
                    {
                    type: 'inside',
                    start: 0,
                    end: 10
                    },
                    {
                    start: 0,
                    end: 10
                    }
                ],
                series: []
            };

            if(data1==1){
                data_chart_option.series.push({
                    name: 'Data 1',
                    type: 'line',
                    symbol: 'none',
                    sampling: 'lttb',
                    itemStyle: {
                        color: '#FF0000'
                    },
                    data: SensorData1
                });
            }
            if(data2==1&&(SensorFileType==1||SensorFileType==3)){
                data_chart_option.series.push({
                    name: 'Data 2',
                    type: 'line',
                    symbol: 'none',
                    sampling: 'lttb',
                    itemStyle: {
                        color: '#66CCFF'
                    },
                    data: SensorData2
                });
            }
            if(data3==1&&(SensorFileType==1)){
                data_chart_option.series.push({
                    name: 'Data 3',
                    type: 'line',
                    symbol: 'none',
                    sampling: 'lttb',
                    itemStyle: {
                        color: '#00FF00'
                    },
                    data: SensorData3
                });
            }
            if(data4==1&&(SensorFileType==1)){
                data_chart_option.series.push({
                    name: 'Data 4',
                    type: 'line',
                    symbol: 'none',
                    sampling: 'lttb',
                    itemStyle: {
                        color: '#FFFF00'
                    },
                    data: SensorData4
                });
            }
            //             name: 'Data 2',
            //             type: 'line',
            //             symbol: 'none',
            //             sampling: 'lttb',
            //             itemStyle: {
            //                 color: '#66CCFF'
            //             },
            //             // areaStyle: {
            //             //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            //             //     {
            //             //         offset: 0,
            //             //         color: 'rgb(120, 198, 255)'
            //             //     },
            //             //     {
            //             //         offset: 1,
            //             //         color: 'rgb(89, 168, 255)'
            //             //     }
            //             //     ])
            //             // },
            //             data: data2
            //         }

            data_chart.clear();
            data_chart.setOption(data_chart_option);
        }

        function reload_by_form(){
            let widget_file_path = $("#sensor-filepath");
            let widget_simple_level = $("#sensor-simplelevel");
            let widget_filter_level = $("#sensor-filterlevel");
            let widget_file_type = $("#sensor-filetype");
            let widget_file_data_type = $("#sensor-filedatatype");

            loadFiles(widget_file_path.val().replace(" ",""),widget_file_type.val(),widget_simple_level.val(),widget_filter_level.val(),widget_file_data_type.val());
        }

        setTimeout(function (){
            data_chart_dom = document.getElementById('data_chart');
            var dc_width = data_chart_dom.clientWidth;
            data_chart_dom.style.height = dc_width*0.4+"px";

            data_chart = echarts.init(data_chart_dom);

            let widget_file_path = $("#sensor-filepath");
            let widget_simple_level = $("#sensor-simplelevel");
            let widget_filter_level = $("#sensor-filterlevel");
            let widget_file_type = $("#sensor-filetype");
            let widget_file_data_type = $("#sensor-filedatatype");

            loadFiles = async function(path,filetype,simplelevel,filterlevel,filedatatype) {
                $.ajaxSettings.async = false;  //设置为同步请求
                $.ajax({
                    url: "/api/sensordata",
                    data: JSON.stringify({"File": path , "FileType": filetype, "SimpleLevel": simplelevel, "FilterLevel":filterlevel,"FileDataType":filedatatype,"Code": "OK"}),
                    type: "post",
                    success: function (response) {
                        console.log(response);
                        
                        widget_file_path.val(path);
                        widget_simple_level.val(response.DataInfo["SimpleLevel"]);
                        widget_filter_level.val(response.DataInfo["FilterLevel"]);
                        SensorFileType = response.DataInfo["FileType"];
                        widget_file_type.val(response.DataInfo["FileType"]);

                        DataCount.value = response.DataInfo["Count"];

                        DateData = response.DataInfo["Date"];
                        SensorData1 = response.DataInfo["Data1"];
                        if(SensorFileType==3||SensorFileType==1){
                            SensorData2 = response.DataInfo["Data2"];
                            if(SensorFileType==1){
                                SensorData3 = response.DataInfo["Data3"];
                                SensorData4 = response.DataInfo["Data4"];
                            }
                        }

                        ShowDataCount.value = SensorData1.length;

                        update_chartShow();
                    },
                    error: function (xhr, status, error) {

                    }
                });
                $.ajaxSettings.async = true;
            }

            widget_file_path.val("sensor_data.txt");
            widget_simple_level.val(2);
            widget_filter_level.val(100);
            SensorFileType = -1;
            widget_file_type.val(response.DataInfo["FileType"]);
        },200);
    </script>
</html>